// 声明变量


// 全选框
var selectAll = document.getElementsByClassName('selectAll')[0];
// 上下翻页 页数
var size2 = document.getElementsByClassName('size2')[0];
// 第几页
var page = 1;
// 显示几列
var lis = 10;
var interim = [];
var state1 = false
var num1;
var nowStudents1 = [];
var students = JSON.parse(localStorage.getItem('students'));
// console.log(students)
// 截取学生数组 获取新学生数组
var nowStudents = students.slice((page - 1) * lis,page * lis);
// 渲染内容函数
function addcent(nowStudents) {
    $('tbody').html('');
    $('.size2').html('');
    for(var i = 0; i < nowStudents.length; i++) {
        var cent1;
        if (nowStudents[i].state == true) {
            cent1 = `<span class="select selected_on" data-id=${nowStudents[i].id} data-name = select_1></span>`;
          } else {
            cent1 = `<span class="select" data-id=${nowStudents[i].id} data-name = select_1></span>`;
        }
        var cent = `
        <tr>
            <td>${cent1}</td>
            <td>${nowStudents[i].name}</td>
            <td>${nowStudents[i].class}</td>
            <td>${nowStudents[i].gender}</td>
            <td>${nowStudents[i].id}</td>
            <td>${nowStudents[i].phone}</td>
            <td>${nowStudents[i].Email}</td>
            <td>${nowStudents[i].Dates}</td>
            <td>
                <a href="../ly_pages/student_revamp.html?userId=${nowStudents[i].id}" target="myiframe">
                    <div class = "btn-group btn-group-xs">
                        <button type="button" class= "btn btn-primary">
                            修改
                        </button>
                    </div>
                </a>
                &nbsp;&nbsp;
                <a href="../ly_pages/student_details.html?userId=${nowStudents[i].id}" target="myiframe">
                    <div class = "btn-group btn-group-xs">
                        <button type="button" class= "btn btn-info">
                            查询
                        </button>  
                    </div>
                </a>
                &nbsp;&nbsp;
                <div class = "btn-group btn-group-xs">
                    <button type="button" class= "btn btn-danger" data-id=${nowStudents[i].id}>
                        删除
                    </button>
                </div> 
            </td>
        </tr>
        `    
    $('tbody').append(cent);
    }
    var pages1 = Math.ceil(students.length / lis);
    for(var n = 1; n < pages1 + 1; n++) {
        var pages2 = `<p id = "size2-p3" data-name = ${state1}>${n}</p>`;
        // if ( state1 == true) {
        //     pages2 = `
        //     <p class="bg-info" id = "size2-p3" data-name = ${state1}>${n}</p>
        //     `
        // } else {
        //     pages2 = `
        //     <p id = "size2-p3" data-name = ${state1}>${n}</p>
        //     `
        // }
        interim.push(pages2);
    }
    var pages3 = interim.join().replace(',', '');
    var pages = `
        <p class="size2-p1">
            上一页
        </p>
        ${pages3}
        <p class="size2-p2">
            下一页>
        </p>
    `
    interim = [];
    $('.size2').append(pages);
}
// 执行渲染内容函数
addcent(nowStudents);




// 添加事件


// 渲染内容添加点击事件
$('tbody')[0].onclick = function (e) {
    var e = e || window.event;
    var target = e.target || e.srcElement;
    var Id1 = Number(target.dataset.id);
    switch (target.dataset.name) {
        case 'select_1':
            selectcor(Id1);
            break;
    }
    switch (target.className) {
        case 'btn btn-danger':
            del(Id1);
            break;
    }
}

// 上下翻页 页数 添加点击事件
size2.onclick = function (e) {
var e = e || window.event;
var target = e.target || e.srcElement;
num1 = target.innerText;
// console.log(target.id)
switch (target.className) {
    case 'size2-p1':
        prey();
        break;
    case 'size2-p2':
        next();
        break;
}
switch (target.id) {
    case 'size2-p3':
        num(num1);
        break;
}
}

// 点击删除事件函数
$('#button1').on('click',function() {
    var deleteBounced = parent.layer.open({
        content: '是否确定删除'
        ,yes: function(){
            for(var i = 0; i < nowStudents.length; i++) {
                if(nowStudents[i].state == true) {   
                   nowStudents1.push(nowStudents[i])
                }
            }
            for (var n = 0; n < students.length; n++) {
                for (var k = 0; k < nowStudents1.length; k++) {
                    if (students[n].id == nowStudents1[k].id) {
                        students.splice(n,1);
                    }
                }
            }
            localStorage.setItem('students', JSON.stringify(students));
            nowStudents = students.slice((page - 1) * lis,page * lis);
            addcent(nowStudents);
            parent.layer.close(deleteBounced);
        }
      });
})


// 删除函数
function del(Id1) {
    var deleteBounced = parent.layer.open({
        content: '是否确定删除'
        ,yes: function(){
            for (var n = 0; n < students.length; n++) {
                if (students[n].id == Id1) {
                    students.splice(n,1);
                }
            }
            localStorage.setItem('students', JSON.stringify(students));
            console.log(students)
            nowStudents = students.slice((page - 1) * lis,page * lis);
            addcent(nowStudents);
            parent.layer.close(deleteBounced);
        }})
}


// 单选框函数
function selectcor(Id1) {
    nowStudents.forEach(function (item) {      
        if (item.id == Id1) {
        item.state = ! item.state;
    }
    });
    var x1 = nowStudents.every(function (item) {     
        return item.state == true
    });
    if (x1) {
        selectAll.classList.add('selected_on');
    } else {
        selectAll.classList.remove('selected_on');
    }
    addcent(nowStudents);
}

// 全选框函数
selectAll.onclick = function() {
    if (this.className == 'select selectAll') { // 全选了
        this.classList.add('selected_on');
        nowStudents.forEach(function (item) {
          item.state = true;
        });
      } else {
        this.classList.remove('selected_on');
        nowStudents.forEach(function (item) {
          item.state = false;
        });
    }
    addcent(nowStudents);
}

// 页数函数
function num(num1) {
    selectAll.classList.remove('selected_on');
    nowStudents.forEach(function (item) {
        item.state = false;
    });
    page = num1;
    nowStudents = students.slice((page - 1) * lis,page * lis);
    addcent(nowStudents)
}
// 下一页函数
function next() {
    selectAll.classList.remove('selected_on');
    nowStudents.forEach(function (item) {
        item.state = false;
    });
    if(page < Math.ceil(students.length / lis)) {
        page += 1;
        nowStudents = students.slice((page - 1) * lis,page * lis);
        addcent(nowStudents)
    } else {
        alert('已经到头了')
    }
}

// 上一页函数
function prey() {
    selectAll.classList.remove('selected_on');
    nowStudents.forEach(function (item) {
        item.state = false;
    });
    if(page > 1) {
        page -= 1;
        nowStudents = students.slice((page - 1) * lis,page * lis);
        addcent(nowStudents)
    } else {
        alert('前面没有页数了')
    }
}







